🔹 HTML 基本架構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>我的第一個網頁</title>
</head>
<body>
<header>頁首</header>
<nav>導覽列</nav>
<section>
<article>主要內容</article>
</section>
<aside>側邊欄</aside>
<footer>頁尾</footer>
</body>
</html>
🔹 常見標籤語法說明
| 標籤 |
說明 |
<!DOCTYPE html> |
告訴瀏覽器這是 HTML5 文件 |
<html> |
整份 HTML 文件的根節點 |
<head> |
放置網頁的設定資訊，例如標題、字元編碼、外部資源 |
<meta charset="UTF-8"> |
設定網頁使用 UTF-8 編碼，避免出現亂碼 |
<title> |
設定瀏覽器分頁上的標題文字 |
<body> |
放網頁上會顯示的所有內容 |
🔹 語意化標籤（HTML5 新增）
| 標籤 |
功能說明 |
<header> |
頁首區塊，可放網站標題、LOGO、選單等 |
<nav> |
導覽列，通常放選單或超連結列表 |
<section> |
主題區塊，可劃分為頁面中獨立的小節 |
<article> |
自成一體的內容，如文章、貼文等 |
<aside> |
補充內容，像是側邊欄、推薦連結、廣告等 |
<footer> |
頁尾區塊，常見資訊如聯絡方式、版權宣告 |
🔹 注意事項
- 標籤必須正確開啟與關閉，例如：
<p>段落</p>
- 標籤可以巢狀，但不能交錯：✅
<b><i>文字</i></b>，❌ <b><i>文字</b></i>
- 建議統一使用小寫標籤名稱（HTML5 標準）
-
lang="zh-TW"：設定網頁語系為繁體中文，有助於搜尋引擎與瀏覽器識別。
-
<meta charset="UTF-8">：使用 UTF-8 編碼，避免中文亂碼。
- 使用語意化標籤能讓結構更清楚，也更容易維護與理解
🔹 參考文件
zoelinrd
iThome鐵人賽
看影片追技術